<template>
  <div class="content">
    <!--顶部-->
    <van-sticky>
      <van-row class="search-top" type="flex" align="center" justify="center">
        <van-col span="1" offset="1">
          <van-icon color="white" size="24px" name="location-o"></van-icon>
        </van-col>
        <van-col span="18">
          <van-search v-model="value" shape="round" background="skyblue" placeholder="水果"/>
        </van-col>
        <van-col span="2">
          <van-icon size="24px" color="green" name="points"></van-icon>
        </van-col>
        <van-col span="2">
          <van-icon size="24px" color="white" dot name="chat-o"></van-icon>
        </van-col>
      </van-row>
    </van-sticky>
    <!--      &lt;!&ndash;轮播图&ndash;&gt;
          <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image,index) in images" :key="index">
              <img :src="image"/>
            </van-swipe-item>
          </van-swipe>
          &lt;!&ndash;九宫格&ndash;&gt;
          <van-grid :border="false" :column-num="5">
            <van-grid-item v-for="(item,index) in cataList" :key="index" :icon="item.pic" :text="item.name">
            </van-grid-item>
          </van-grid>-->
    <!--导航菜单,吸顶-->

    <van-tabs @change="changeTab(active)" swipeable class="top" title-active-color="skyblue" background="#fff"
              color="skyblue" swipe-threshold="5" v-model="active">
      <van-tab title="热榜">

        <goods-list :list="productlist"></goods-list>

      </van-tab>
      <van-tab title="推荐">

        <van-list
          style="padding:16px 0px 0;background:#e7e7e7"
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <van-cell center title="是我平头哥了吗？" label="hi辉 刚刚">
            <template #right-icon class="fds">
              <van-icon name="chat-o" class="icon_class" size="10">502</van-icon>
              <van-icon name="good-job-o" class="icon_class" size="10">130</van-icon>
              <van-icon name="fire-o" class="icon_class" size="10">12</van-icon>
            </template>
          </van-cell>
          <van-cell center title="这高铁也太晃了吧？" label="蝴蝶酥 刚刚">
            <template #right-icon>
              <van-icon name="chat-o" class="icon_class" size="10">5124</van-icon>
              <van-icon name="good-job-o" class="icon_class" size="10">950</van-icon>
              <van-icon name="fire-o" class="icon_class" size="10">150</van-icon>
            </template>
          </van-cell>
          <van-cell center title="带上大瓶可乐+雪碧去见岳父岳母" label="懂球帝 刚刚">
            <template #right-icon class="fds">
              <van-icon name="chat-o" class="icon_class" size="10">3145</van-icon>
              <van-icon name="good-job-o" class="icon_class" size="10">450</van-icon>
              <van-icon name="fire-o" class="icon_class" size="10">158</van-icon>
            </template>
          </van-cell>
          <van-cell center title="这高铁也太晃了吧？" label="蝴蝶酥 刚刚">
            <template #right-icon>
              <van-icon name="chat-o" class="icon_class" size="10">5124</van-icon>
              <van-icon name="good-job-o" class="icon_class" size="10">950</van-icon>
              <van-icon name="fire-o" class="icon_class" size="10">150</van-icon>
            </template>
          </van-cell>
          <van-cell center title="带上大瓶可乐+雪碧去见岳父岳母" label="懂球帝 刚刚">
            <template #right-icon class="fds">
              <van-icon name="chat-o" class="icon_class" size="10">3145</van-icon>
              <van-icon name="good-job-o" class="icon_class" size="10">450</van-icon>
              <van-icon name="fire-o" class="icon_class" size="10">158</van-icon>
            </template>
          </van-cell>
          <van-cell center title="这高铁也太晃了吧？" label="蝴蝶酥 刚刚">
            <template #right-icon>
              <van-icon name="chat-o" class="icon_class" size="10">5124</van-icon>
              <van-icon name="good-job-o" class="icon_class" size="10">950</van-icon>
              <van-icon name="fire-o" class="icon_class" size="10">150</van-icon>
            </template>
          </van-cell>
          <van-cell center title="带上大瓶可乐+雪碧去见岳父岳母" label="懂球帝 刚刚">
            <template #right-icon class="fds">
              <van-icon name="chat-o" class="icon_class" size="10">3145</van-icon>
              <van-icon name="good-job-o" class="icon_class" size="10">450</van-icon>
              <van-icon name="fire-o" class="icon_class" size="10">158</van-icon>
            </template>
          </van-cell>
          <van-cell center title="这高铁也太晃了吧？" label="蝴蝶酥 刚刚">
            <template #right-icon>
              <van-icon name="chat-o" class="icon_class" size="10">5124</van-icon>
              <van-icon name="good-job-o" class="icon_class" size="10">950</van-icon>
              <van-icon name="fire-o" class="icon_class" size="10">150</van-icon>
            </template>
          </van-cell>
          <van-cell center title="带上大瓶可乐+雪碧去见岳父岳母" label="懂球帝 刚刚">
            <template #right-icon class="fds">
              <van-icon name="chat-o" class="icon_class" size="10">3145</van-icon>
              <van-icon name="good-job-o" class="icon_class" size="10">450</van-icon>
              <van-icon name="fire-o" class="icon_class" size="10">158</van-icon>
            </template>
          </van-cell>
          <van-cell center title="这高铁也太晃了吧？" label="蝴蝶酥 刚刚">
            <template #right-icon>
              <van-icon name="chat-o" class="icon_class" size="10">5124</van-icon>
              <van-icon name="good-job-o" class="icon_class" size="10">950</van-icon>
              <van-icon name="fire-o" class="icon_class" size="10">150</van-icon>
            </template>
          </van-cell>
          <van-cell center title="带上大瓶可乐+雪碧去见岳父岳母" label="懂球帝 刚刚">
            <template #right-icon class="fds">
              <van-icon name="chat-o" class="icon_class" size="10">3145</van-icon>
              <van-icon name="good-job-o" class="icon_class" size="10">450</van-icon>
              <van-icon name="fire-o" class="icon_class" size="10">158</van-icon>
            </template>
          </van-cell>
          <van-cell center title="这高铁也太晃了吧？" label="蝴蝶酥 刚刚">
            <template #right-icon>
              <van-icon name="chat-o" class="icon_class" size="10">5124</van-icon>
              <van-icon name="good-job-o" class="icon_class" size="10">950</van-icon>
              <van-icon name="fire-o" class="icon_class" size="10">150</van-icon>
            </template>
          </van-cell>
          <van-cell center title="带上大瓶可乐+雪碧去见岳父岳母" label="懂球帝 刚刚">
            <template #right-icon class="fds">
              <van-icon name="chat-o" class="icon_class" size="10">3145</van-icon>
              <van-icon name="good-job-o" class="icon_class" size="10">450</van-icon>
              <van-icon name="fire-o" class="icon_class" size="10">158</van-icon>
            </template>
          </van-cell>
          <van-cell center title="这高铁也太晃了吧？" label="蝴蝶酥 刚刚">
            <template #right-icon>
              <van-icon name="chat-o" class="icon_class" size="10">5124</van-icon>
              <van-icon name="good-job-o" class="icon_class" size="10">950</van-icon>
              <van-icon name="fire-o" class="icon_class" size="10">150</van-icon>
            </template>
          </van-cell>
          <van-cell center title="带上大瓶可乐+雪碧去见岳父岳母" label="懂球帝 刚刚">
            <template #right-icon class="fds">
              <van-icon name="chat-o" class="icon_class" size="10">3145</van-icon>
              <van-icon name="good-job-o" class="icon_class" size="10">450</van-icon>
              <van-icon name="fire-o" class="icon_class" size="10">158</van-icon>
            </template>
          </van-cell>

        </van-list>


      </van-tab>
    </van-tabs>


    <div class="zero-wrap"/>
    <foot-tabs></foot-tabs>
  </div>
</template>

<script>
  import FootTabs from '../components/common/foot-tabs'
  import GoodsList from '../components/home/goods-list'

  export default {
    name: "Home",
    components: {FootTabs, GoodsList},
    data() {
      return {
        loading: false,
        finished: false,
        value: '',
        active: 0,
        stickyHeight: '54',
        images: [
          require("../assets/pic/1.jpg"),
          require("../assets/pic/2.jpg"),
          require("../assets/pic/3.jpg"),
          require("../assets/pic/4.jpg")
        ],
        cataList: [
          {
            name: '餐饮熟食',
            pic: require("../assets/pic/cata/1.png")
          },
          {
            name: '乳品烘焙',
            pic: require("../assets/pic/cata/2.png")
          },
          {
            name: '美妆百货',
            pic: require("../assets/pic/cata/3.png")
          },
          {
            name: '酒水饮料',
            pic: require("../assets/pic/cata/4.png")
          },
          {
            name: '粮油零食',
            pic: require("../assets/pic/cata/5.png")
          },
          {
            name: '面点冻品',
            pic: require("../assets/pic/cata/6.png")
          },
          {
            name: '海鲜水产',
            pic: require("../assets/pic/cata/7.png")
          },
          {
            name: '肉禽蛋品',
            pic: require("../assets/pic/cata/8.png")
          },
          {
            name: '新鲜蔬菜',
            pic: require("../assets/pic/cata/9.png")
          },
          {
            name: '时令水果',
            pic: require("../assets/pic/cata/10.png")
          }
        ],
        productlist: [
          {
            id: 1,
            name: '羊排 1000g',
            desc: '草园领头羊',
            price: 120,
            unit: '份',
            pic: require("../assets/pic/product/1.jpg")
          },
          {
            id: 2,
            name: '猪瘦肉',
            desc: '乡村,精选',
            price: 80,
            unit: '公斤',
            pic: require("../assets/pic/product/2.jpg")
          },
          {
            id: 3,
            name: '明虾',
            desc: '南美白虾',
            price: 240,
            unit: '公斤',
            pic: require("../assets/pic/product/3.jpg")
          },
          {
            id: 4,
            name: '龙虾',
            desc: '澳洲出产',
            price: 160,
            unit: '只',
            pic: require("../assets/pic/product/4.jpg")
          },
          {
            id: 5,
            name: '红萝卜',
            desc: '根根脆爽,饱满红嫩',
            price: 4,
            unit: '公斤',
            pic: require("../assets/pic/product/5.jpg")
          },
          {
            id: 6,
            name: '青尖椒',
            desc: '入口微辣,肉厚质嫩',
            price: 4.98,
            unit: '份',
            pic: require("../assets/pic/product/6.jpg")
          }
        ]
      }
    },
    mounted() {
      let w = document.querySelector(".search-top").clientHeight;
      this.stickyHeight = `${w}`;
    },
    methods: {
      onLoad() {
        console.log(11)
      },
      changeTab(active) {
        console.log(active + "active")
      }
    }
  }
</script>

<style scoped>
  .content {
    background: #ccc;
  }

  .search-top {
    background: skyblue;
  }

  img {
    width: 100%;
    height: 150px;
  }

  .zero-wrap {
    height: 50px;
  }

  .top {
    height: 50px;
    background: white;
  }
</style>
